<template>
  <div class="dept-number-chart-div"
       ref="deptNumberChartDiv"
       id="deptNumberChartDiv"></div>
</template>

<script>
  // 引入基本模板
  // 引入环形图图组件
  import 'echarts/lib/chart/pie'
  import 'echarts/lib/chart/bar'
  import 'echarts/lib/chart/line'
  // 引入提示框和title组件
  import 'echarts/lib/component/tooltip'
  import 'echarts/lib/component/title'
  // import pieEchartsOption from '@/utils/echarts/pie.js' // 引用统计图样式
  let echarts = require('echarts/lib/echarts')
  export default {
    data () {
      return {

      }
    },
    created () {
      this.getDeptNumberAndEffcientcyCharts()
    },
    methods: {
      // 各处室工单办理量统计
      getDeptNumberAndEffcientcyCharts () {
        this.deptNumDivLoading = true
        this.$axios
          .post(this.$api.homeCharts.deptWorkAndEfficiencyCharts)
          .then(rs => {
            if (rs) {
              this.deptWorkData = rs
              this.deptNumDivLoading = false
              // console.log(this.deptWorkData)
              // 基于准备好的dom，初始化echarts实例
              let myChart = echarts.init(this.$refs.deptNumberChartDiv)
              if (!myChart) return
              // 绘制图表
              myChart.setOption({
                title: {
                  text: this.$moment().format('YYYY') + '年各处室工单处理量统计',
                  x: 'center'
                },
                tooltip: {
                  trigger: 'axis',
                  // formatter: "{a} <br/>{b} : {c} ",
                  axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                  }
                },
                legend: {
                  data: ['处理量(件)', '处理时效(天)'],
                  y: 'top',
                  right: 120,
                  selectedMode: false // 取消图例上的点击事件
                },
                xAxis: {
                  type: 'category',
                  data: this.deptWorkData.name.split(','),
                  axisLabel: {
                    // 调整x轴的lable
                    // interval: 0, // 全部显示
                    clickable: false, // 可点击
                    textStyle: {
                      fontSize: 14 // 让字体变大
                    }
                  }
                },
                yAxis: [
                  {
                    type: 'value',
                    name: '处理量(件)',
                    axisLabel: {
                      // 调整y轴的lable
                      textStyle: {
                        fontSize: 14 // 让字体变大
                      }
                    },
                    nameTextStyle: {
                      fontSize: 14,
                      fontFamily: 'Microsoft YaHei,微软雅黑'
                    }
                  },
                  {
                    type: 'value',
                    name: '处理时效(天)',
                    min: 0,
                    max: 10,
                    interval: 2,
                    axisLabel: {
                      // 调整y轴的lable
                      textStyle: {
                        formatter: '{value}',
                        textStyle: {
                          fontSize: 16 // 让字体变大
                        }
                      }
                    },
                    nameTextStyle: {
                      fontSize: 14,
                      fontFamily: 'Microsoft YaHei,微软雅黑'
                    }
                  }
                ],
                series: [
                  {
                    data: this.deptWorkData.numbers.split(','),
                    name: '处理量(件)',
                    type: 'bar',
                    barCategoryGap: '50%',
                    itemStyle: {
                      normal: {
                        color: '#5AB1EF',
                        label: {
                          show: true,
                          position: 'top',
                          fontSize: 16 // 让字体变大
                        }
                      }
                    },
                    markPoint: {
                      data: [
                        { type: 'max', name: '最大值' },
                        { type: 'min', name: '最小值' }
                      ],
                      itemStyle: {
                        normal: {
                          color: '#5AB1EF'
                        }
                      }
                    }
                  },
                  {
                    data: this.deptWorkData.effcicy.split(','),
                    name: '处理时效(天)',
                    type: 'line',
                    smooth: true,
                    yAxisIndex: 1,
                    showSymbol: true,
                    symbol: 'circle', // 设定为实心点
                    symbolSize: 14, // 设定实心点的大小
                    itemStyle: {
                      normal: {
                        color: '#97B552',
                        lineStyle: {
                          color: '#97B552'
                        }
                      }
                    },
                    markPoint: {
                      data: [
                        { type: 'max', name: '最大值' },
                        { type: 'min', name: '最小值' }
                      ],
                      itemStyle: {
                        normal: {
                          color: '#97B552'
                        }
                      }
                    }
                  }
                ]
              })
            }
          })
      }
    }
  }
</script>

<style lang='scss' scoped>
  .dept-number-chart-div {
    width: 100%;
    height: 400px;
    padding-top: 20px;
  }
</style>
